Theme Editor

Inspecting Elements

Clicking once on an element shows the rules that affect it and its Tersus details in the Editor pane.

The rules are presented in the same order as in the CSS files. Each rule has a color, which indicates edit-ability. Editable rules, colored in blue, are those that come from theme.css file. Non-editable rules are colored in gray.

When there is more than one rule with the same selector and the same property name, only the last occurrence of each property can take affect. Earlier occurrences are overridden are display with a strikethrough font ().

Adding, Deleting and Editing CSS Rules

Clicking the selector of an editable rule opens a text box that allows youe to change that selector.

Clicking the 'Remove Rule' button () in the editor's Action toolbar opens a dialog with a list of editable rules. You can check the rule(s) you wish to delete and by clicking the 'Ok' button, the rule(s) are removed.

Clicking the 'Add Rule' button () in the editor's Action toolbar adds new rule to the end of the rule list with the default selector: 'New Rule'. No rule can be saved using this selector text, so you should change the rule's selector in order to save it. To add the first property in the new rule's declaration, click on the Tab key while the rule's selector field is in focus.

Adding, Deleting and Editing Properties

If you click property of an editable rule, text box appears and let you modify the property's name and value. Changes are applied immediately. Typing a property name displays a list of properties whose names match the typed text. If you double click a non-editable property a corresponding editable property is created (if needed), and will get focus so it's ready to be edited.

The Tab key can be used to move from one property to the next. If the current property is the last in the rule, a new property is added at the end. If the property name and value are both cleared, the property and the row itself are removed.

Setting the 'html.styleClass' Property

In Tersus studio, the 'html.styleClass' property, which maps to the HTML 'class' attribute, can be added to display elements. The user can add this property to the selected element if it doesn't already have an HTML class.

Clicking the 'Add Class' button () in the editor's Action toolbar opens a dialog with two possible settings for the 'html.styleClass' property (Shared or Local). Choose one and then set the class name and clicks the 'OK' button.

For an elements that already has an HTML class, it is displayed after the dot in the element name title () In this case, it is not possible to add, delete or change the class name.

Choosing an Existing Theme from a Tersus Theme List

The Tersus platform contains several pre-defined themes that you can use as a starting point for your design. If you choose one of these themes, youe existing design is deleted (replaced by the selected theme).

To choose a pre-defined theme, click the 'Choose Theme' button () in the Theme Actions toolbar. A dialog box opens and a list of themes is displayed on screen. Choose your favorite theme, and click the 'OK' button.

Preview of a Application with Your Changes

Theme Editor enables you to edit your application's theme while watching the results immediately in the View pane.

There are two modes for the View pane:

1. Edit Mode - (The default mode) Neutralizing the application. Allows you to select an elements and edit their style.
2. View Mode - Using the application as it is. This is useful if you need to interact with the application in order to show up display elements that you want to design.

Tersus Details Pane

Located in the bottom of the editor pane, this pane displays the Tersus details of the selected element (if they exits*).

There are four fields in the pane:

• Model Name - The element's Tersus model name. Clicking its value opens the model of a selected element in the Tersus studio.
• Element Name - The Tersus element name.
• Plugin - The tersus plugin being used.
• Path - The path of the element relative to the containing view.

* Tersus details pane is empty, when the selected element doesnot correspond directly to a specific element in the model.

Element Hierarchy Bar

The Element Hierarchy bar displays the element's HTML tag hierarchy starting at the HTML root tag and down to the selected element's tag. The selected element's tag appears in bold font.

When moving the mouse over an element in the hierarchy bar, the element is highlighted and the user can see its box shaded in the Application pane.

By clicking an element, it becomes the selected element, and the editor pane shows its rules and details.

iPhone\Desktop Mode

For iPhone application development, two different display views are available :

• Desktop view - The default view
• iPhone view - Presents the application in its iPhone look and feel. Clicking the iPhone button () in top of the page switches the view to horizontal/vertical iPhone look accordingly to the presented icon.

Changing the view by choosing an item from the Views Chooser button on the top left corner of the screen. If you have some unsaved changes, a dialog box is opened and you can select whether to saving the changes, not save (current changes will be lost) or to cancel.

* The option to change views is only available for iPhone application development.